<template>
  <view class="change-box">
    <div class="product-list" v-if="list.length > 0">
      <div class="product-item" v-for="item in list" :key="item.goodsId" @click="jumpTo(item)">
        <div class="img"><img :src="item.goodsCoverImg" mode="aspectFit" alt=""></div>
        <div class="title">{{ item.goodsName }}</div>
        <div class="info">{{ item.goodsIntro }}</div>
        <div class="price flex-a flex-b">
          <div class="flex-a"><img src="https://cxj.szzkba.cn/up/uploadPath/icon/pP2qsCd.png" alt=""><text>{{
            item.sellingPrice
          }}积分</text></div>
          <div><nut-button type="info" size="mini" :disabled="integral < item.sellingPrice"
              @click.stop="showPop(item)">兑换</nut-button>
          </div>
        </div>
      </div>
    </div>
    <nut-empty v-else description="无数据"></nut-empty>
    <nut-popup position="bottom" closeable round :style="{ height: '40%' }" v-model:visible="showRound">
      <div class="add-list">
        <div class="add-item flex-a flex-b" v-for="(item, index) in addressList" :key="item.addressId">
          <div class="left">
            <div class="flex-a"><span class="name">{{ item.userName }}</span><span class="phone">{{ item.userPhone
            }}</span>
            </div>
            <div class="address">{{ item.provinceName + item.cityName + item.regionName + item.detailAddress }}
            </div>
          </div>
          <div class="right">
            <nut-checkbox v-model="item.checkbox" :label="item.addressId"
              @change="checked => changeBox(checked, index)"></nut-checkbox>
          </div>
        </div>
      </div>
      <div class="btn">
        <nut-button shape="square" type="info" @click="toChange">去兑换</nut-button>
      </div>
    </nut-popup>
  </view>
</template>

<script>
import Taro, { useRouter, useShareAppMessage } from '@tarojs/taro';
import { reactive, toRefs, onMounted } from 'vue';
import { getGoodsForRecList, getAddressList, toOrderRec, getRecharge } from '../../../api/index'

export default {
  name: 'changeIntegral',
  components: {

  },
  setup() {
    const data = reactive({
      pageNumber: 1,
      pageSize: 10,
      list: [],
      showRound: false,
      addressList: [],
      goodsId: '',
      goodRec: '',
      integral: -1
    });

    onMounted(() => {
      getList()
      getAddressList().then(response => {
        if (response.resultCode == 200) {
          let list = response.data
          list.forEach(item => {
            item.checkbox = false
          })
          data.addressList = list
        }
      })
      getRecharge().then(res => {
        if (res.resultCode == 200) {
          data.integral = res.data.integral
        }
      })
    });
    const getList = () => {
      getGoodsForRecList({
        pageNumber: data.pageNumber,
        pageSize: data.pageSize,
      }).then(res => {
        if (res.resultCode == 200) {
          data.list = res.data.list
        }
      })
    }
    const showPop = (item) => {
      data.goodsId = item.goodsId
      data.goodRec = item.sellingPrice
      data.showRound = true
    }
    const changeBox = (checked, index) => {
      let list = data.addressList
      if (checked == true) {
        list.forEach((item, n) => {
          index != n ? item.checkbox = false : ''
        })
      }
    }
    const jumpTo = (item) => {
      Taro.navigateTo({ url: '/packageA/pages/integralDetail/index?id=' + item.goodsId });
    }
    const toChange = () => {
      let list = data.addressList
      let n = list.findIndex(item => {
        return item.checkbox == true
      })
      if (n == -1) {
        Taro.showToast({
          title: '请先选择收货地址！',
          icon: 'none',
          duration: 2000
        })
      } else {
        toOrderRec(data.goodsId, data.goodRec, list[n].addressId).then(res => {
          if (res.resultCode == 200) {
            Taro.showToast({
              title: '兑换成功！',
              icon: 'success',
              duration: 2000
            })
            data.showRound = false
          }
        })
      }
    }
    return {
      ...toRefs(data), jumpTo, getList, showPop, changeBox, toChange
    }
  }
}
</script>
<style lang="scss">
.change-box {
  background-color: rgb(238, 240, 240) !important;
  padding-top: 7rpx;
  min-height: 100vh;

  .product-list {
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 10rpx;

    .product-item {
      display: inline-block;
      width: 49.5%;
      border: 1rpx solid #F2F2F2;
      background: #fff;
      box-sizing: border-box;
      margin-bottom: 7rpx;
      border-radius: 20rpx;

      .img {
        background: #fff;
        text-align: center;
        height: 250rpx;
        border-radius: 20rpx;

        img {
          width: 100%;
          height: 100%;
        }
      }

      div {
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .title {
        border-top: 1rpx solid #F2F2F2;
        font-size: 24rpx;
        padding: 10rpx;
        box-sizing: border-box;
      }

      .info {
        color: #666;
        font-size: 24rpx;
        padding: 0 10rpx;
        box-sizing: border-box;
      }

      .price {
        color: #666;
        font-size: 24rpx;
        padding: 10rpx;

        img {
          width: 40rpx;
          height: 40rpx;
          margin-right: 5rpx;
        }
      }
    }

    .product-item:nth-child(odd) {
      margin-right: 1%;
    }
  }

  .add-list {
    margin-top: 60rpx;
    box-sizing: border-box;
    height: 400rpx;
    overflow-y: auto;

    .add-item {
      padding: 20rpx 30rpx;
      box-sizing: border-box;
      background: #fff;

      .left {
        .name {
          color: #212121;
          margin-right: 10rpx;
          font-size: 34rpx;
        }

        .phone {
          color: #808080;
          font-size: 28rpx;
        }

        .address {
          color: #404040;
          margin-top: 20rpx;
          font-size: 30rpx;
        }
      }

      .right {
        color: #C0C0C0;
        font-size: 30rpx;
      }
    }
  }

  .btn {
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    padding: 20rpx 40rpx;
    box-sizing: border-box;
    width: 100%;
    text-align: center;

    .nut-button {
      width: 400rpx;
      margin: 0 auto;
      border-radius: 10rpx;
    }
  }
}
</style>
